<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>森海塞尔</title>
    <script src="./js/template-web.js"></script>
    <script src="./js/ajax.js"></script>
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/list.css" />
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="jianjianhead-size">
            <div class="jianjian-headsizebar">
                <div>
                    <a href="/">
                        <img class="jianjian-img" src="./images/index/jianjian-logo.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="/list.html"><span>所有商品</span></a>
                </div>
                <div>
                    <a href="#"><span>新品</span></a>
                </div>
                <div>
                    <a href="#"><span>无线</span></a>
                </div>
                <div>
                    <a href="#"> <span>HiFi</span></a>
                </div>
                <div>
                    <a href="#"><span>降噪</span></a>
                </div>
                <div>
                    <a href="#"><span>耳机配件</span></a>
                </div>
                <div>
                    <a href="#"><span>会员待遇</span></a>
                </div>
                <div>
                    <a href="/activity.html"><span>企业购</span></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="新品上市">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-yonghu">
                            <img src="./images/index/用户.png">
                            <ul class="jianjian-yonghuyc">
                                <!-- 登录状态不同样式 -->
                                <script id="head-login" type="text/html">
                                    {{if uid}}
                                    <div>
                                        <li class="item first">
                                            <span style="font-size: 16px;">欢迎<label
                                                    style="color: #0096D1;">{{uname}}</label></span>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">个人中心</a>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">我的订单</a>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li class="item">
                                            <button onclick="back()" class="jianjian-btn2">退出登录</button>
                                        </li>
                                    </div>
                                    {{else}}
                                    <div>
                                        <li>
                                            <p style="font-size: 5px;">已是会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn">登录</button>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li>
                                            <p style="font-size: 5px;">注册会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn2">注册</button>
                                        </li>
                                    </div>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-gouwuche">
                            <img src="./images/index/购物车.png" alt="">
                            <ul class="jianjian-gouwucheyc">
                                <!-- 购物车不同状态 -->
                                <script id="head-cart" type="text/html">
                                    {{if data}}
                                    {{each data}}
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <div>
                                                <img class="jianjian-img-1" src="{{$value.img1}}">
                                            </div>
                                            <div class="product_name">
                                                {{$value.pname}}
                                            </div>
                                            <div>
                                                <p style="font-size: 16px;">¥{{$value.price}}</p>
                                            </div>
                                            <div class="jianjian-yc">
                                                <a href="javascript:;" onclick="cart_delete({{$value.cart_id}})">
                                                    <img src="./images/index/删 除.png">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                    <li>
                                        <hr>
                                    </li>
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <span>共{{allPnum}}件商品</span>
                                            <span style="color: #36d; font-size: 18px;">¥{{allPrice}}</span>
                                        </div>
                                    </li>
                                    <li>
                                        <button onclick="go_cart()" class="btn-gouwuche">结算</button>
                                    </li>
                                    {{else}}
                                    <li><img src="./images/index/购物车 (1).png"></li>
                                    <li>
                                        <p style="font-size: 9px; color: grey;">您的购物车还没有商品，赶紧选购吧~</p>
                                    </li>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jianjianhead-sizeyc">
            <div class="jianjian-headsizebaryc">
                <div>
                    <a href="#"><img src="./images/index/jianjian-logo.png"></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="IE 100 PRO">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                    <p style="color: gray; font-size: 15px;">大家都在搜</p>
                    <div class="jianjian-text">
                        <a href="#">
                            <p>新品</p>
                        </a>
                        <a href="#">
                            <p>MOMENTUM</p>
                        </a>
                        <a href="#">
                            <p>游戏</p>
                        </a>
                        <a href="#">
                            <p>GSP600</p>
                        </a>
                        <a href="#">
                            <p>真无线二代</p>
                        </a>
                        <a href="#">
                            <p>IE800</p>
                        </a>
                    </div>
                </div>
                <div>
                    <a id="close" href="javascript:;">
                        <img src="./images/index/叉.png">
                    </a>
                </div>
            </div>
        </div>

    </header>

    <table></table>
    <div class="productlist-w">
        <div class="p-top-fh">
            <div class="p-top-l">
                <p id="title">所有商品</p>
            </div>
            <div class="p-top-r layout-flex">
                <div class="layout-flex">
                    <span>新品</span>
                    <span class="layout-flex">销量
            <a>
              <i class="triangle-up"></i>
              <i class="triangle-down"></i>
            </a>
          </span>
                    <span class="layout-flex">价格
            <a>
              <i class="triangle-up"></i>
              <i class="triangle-down"></i>
            </a>
          </span>
                </div>

                <div class="layout-flex">
                    <input type="text" placeholder="最低价" />
                    <p>-</p>
                    <input type="text" placeholder="最高价" />
                </div>
                <button class="top-but">确定</button>
            </div>
        </div>
        <div class="p-flex">
            <div class="p-list">
                <dl class="big-list">
                    <dt><a class="active" data-fid="all" href="javascript:;">所有商品</a></dt>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="new" href="javascript:;">新品首发</a></dt>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="1" href="javascript:;">无线系列</a></dt>
                    <dd><a data-cid="8" href="javascript:;">真无线</a></dd>
                    <dd><a data-cid="9" href="javascript:;">颈挂入耳</a></dd>
                    <dd><a data-cid="10" href="javascript:;">降噪头戴</a></dd>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="2" href="javascript:;">HIFI系列</a></dt>
                    <dd><a data-cid="11" href="javascript:;">旗舰入耳</a></dd>
                    <dd><a data-cid="12" href="javascript:;">HIFI头戴</a></dd>
                    <dd><a data-cid="13" href="javascript:;">耳机前端</a></dd>
                    <dd><a data-cid="14" href="javascript:;">家庭音影</a></dd>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="3" href="javascript:;">音乐娱乐</a></dt>
                    <dd><a data-cid="15" href="javascript:;">旅行降噪</a></dd>
                    <dd><a data-cid="16" href="javascript:;">运动健身</a></dd>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="4" href="javascript:;">通讯系列</a></dt>
                    <dd><a data-cid="17" href="javascript:;">监听系列</a></dd>
                    <dd><a data-cid="18" href="javascript:;">蓝牙耳机</a></dd>
                    <dd><a data-cid="19" href="javascript:;">有线耳机</a></dd>
                    <dd><a data-cid="20" href="javascript:;">PC耳机</a></dd>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="5" href="javascript:;">麦克风</a></dt>
                    <dd><a data-cid="21" href="javascript:;">人声话筒</a></dd>
                    <dd><a data-cid="22" href="javascript:;">乐器话筒</a></dd>
                    <dd><a data-cid="23" href="javascript:;">摄像话筒</a></dd>
                    <dd><a data-cid="24" href="javascript:;">会议全向麦</a></dd>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="6" href="javascript:;">游戏系列</a></dt>
                    <dd><a data-cid="25" href="javascript:;">游戏耳机</a></dd>
                    <dd><a data-cid="26" href="javascript:;">扩音器</a></dd>
                </dl>
                <dl class="big-list">
                    <dt><a data-fid="7" href="javascript:;">耳机配件</a></dt>
                    <dd><a data-cid="27" href="javascript:;">耳垫</a></dd>
                    <dd><a data-cid="28" href="javascript:;">头棉</a></dd>
                    <dd><a data-cid="29" href="javascript:;">耳机线</a></dd>
                    <dd><a data-cid="30" href="javascript:;">耳机盒</a></dd>
                    <dd><a data-cid="31" href="javascript:;">耳机单元</a></dd>
                </dl>
            </div>
            <div class="p-product-f">
                <script id="product-list" type="text/html">
                    <div class="p-product-one">
                        <a href="/detail.html?pid={{pid}}">
                            <div class="p-p-onewh"><img src="{{img1}}" /></div>
                            <p class="p-tit">
                                {{if(is_new)}}
                                <span class="p-new">新品</span> {{/if}} {{pname}}
                            </p>
                            <p class="p-price">￥ {{price}}</p>
                        </a>
                    </div>
                </script>
            </div>
        </div>

        <!-- 分页 -->
        <div class="page">
            <a href="javascript:;">上一页</a>
            <a class="active" href="javascript:;">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
            <a href="javascript:;">下一页</a>
        </div>
    </div>

    <!-- 尾部 -->
    <iframe src="./footer.html" width="100%" frameborder="0" scrolling="no" height="414px"></iframe>

    <script src="./js/head.js"></script>
    <script src="./js/list.js"></script>
</body>

</html>